.container
  {
     margin: 0 auto;
	 height: 100%;
     width: 100%;
     position: relative;
     display: flex;
     padding: 0;
     flex: 1;
     align-items: center;
     justify-content: center;
   } 
   .shape 
   {
      /* background: radial-gradient(circle, #000, transparent)  currentcolor; */
      border: 0.025rem solid;
      box-sizing: border-box;
      border-radius: 5%;
      padding: 0.8rem;
      animation: turn 40s infinite linear,
                 rainbow 20s infinite linear
           calc(30 * (10 * (10 - var(--n)) * 0.01) * -1s);
   }
   @keyframes turn 
   {
      0%   {  transform: rotate(0deg); }
      100% {  transform: rotate(360deg); }
   }
   @keyframes rainbow 
   {
      0%,100% { color: #69DADB; }
      16.667% { color: #1597E5; }
      33.333% { color: #113CFC; }
      50.000% { color: #0ff; }
      66.667% { color: #00f; }
      83.333% { color: #193498; }
   }